<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="http://minedata.cn/minemapapi/v1.3/minemap.css">
    <script src="http://minedata.cn/minemapapi/v1.3/minemap.js"></script>
    <style>
        body {
            margin: 0;
            padding: 0;
        }

        #map {
            position: absolute;
            top: 0;
            bottom: 0;
            width: 100%;
        }
    </style>
</head>

<body>
<div id="map"></div>
</body>
<script>
    /**
     * 基本地图加载
     * 地图缩放级别限制
     */
    minemap.accessToken = '25cc55a69ea7422182d00d6b7c0ffa93';
    minemap.solution = 716;
    let map = new minemap.Map({
        container: 'map',
        style: "http://minedata.cn/service/solu/style/id/716",
        center: [116.46, 39.92],
        zoom: 10,
//        pitch: 60,
        maxZoom: 17,    //地图最大缩放级别限制
        minZoom: 9     //地图最小缩放级别限制
    });

//    map.on('load', () => {
//        map.loadImage('海底.png', (error, image) => {
//            if (error) throw error;
//            map.addImage('海底', image);
//            map.addLayer({
//                "id": "points",
//                "type": "symbol",
//                "source": {
//                    "type": "geojson",
//                    "data": {
//                        "type": "FeatureCollection",
//                        "features": [{
//                            "type": "Feature",
//                            "geometry": {
//                                "type": "Point",
//                                "coordinates": [116.46, 39.92]
//                            }
//                        }]
//                    }
//                },
//                "layout": {
//                    "icon-image": "海底",
//                    "icon-size": .5
//                }
//            });
//        });
//
//    });
    map.on('load', () => {
        let image = new Image(200,200);
        image.src = "海底.png";
        image.addEventListener("load",function (e) {
            map.addImage('海底', e.target);
            map.addLayer({
                "id": "points",
                "type": "symbol",
                "source": {
                    "type": "geojson",
                    "data": {
                        "type": "FeatureCollection",
                        "features": [{
                            "type": "Feature",
                            "geometry": {
                                "type": "Point",
                                "coordinates": [116.46, 39.92]
                            }
                        }]
                    }
                },
                "layout": {
                    "icon-image": "海底",
                    "icon-size": .5
                }
            });
        })

    });

</script>

</html>